<script setup lang="ts">
import { ref, reactive } from "vue";
import process from "./component/process.vue";
import { getParentMap } from './hook/flowData.hook'
import { FlowData, FlowTypeEnum } from "./index.d";

//演示数据
let flowData: FlowData = reactive({
    id: "1",
    name: "发起人",
    type: FlowTypeEnum.START,
    nextNode: {
        id: "3",
        info: {},
        branches: [
            {
                id: "4",
                name: "分支",
                type: FlowTypeEnum.BRANCH,
            },
            {
                id: "5",
                name: "分支",
                type: FlowTypeEnum.BRANCH,
            },
        ],
        nextNode: {
            id: "6",
            info: {},
            branches: [
                {
                    id: "7",
                    info: {},
                    name: "分支",
                    type: FlowTypeEnum.BRANCH,
                    nextNode: {
                        id: "8",
                        info: {},
                        branches: [
                            {
                                id: "9",
                                name: "分支",
                                type: FlowTypeEnum.BRANCH,
                            },
                            {
                                id: "10",
                                name: "分支",
                                type: FlowTypeEnum.BRANCH,
                            },
                        ],
                    },
                },
                {
                    id: "11",
                    info: {},
                    name: "分支",
                    type: FlowTypeEnum.BRANCH,
                },
            ],
            nextNode: {
                id: "2",
                name: "结束",
                type: FlowTypeEnum.END,
            },
        },
    },
});

const { parentMap, loop } = getParentMap()
//删除节点
const delItem = (item: FlowData) => {
    loop(flowData, item.id, (data) => {
        let parentId = (parentMap.get(item.id) as FlowData).id
        if (data.type == FlowTypeEnum.BRANCH) {
            loop(flowData, parentId, (d) => {
                if ((d.branches as FlowData[]).length > 2) {
                    d.branches?.forEach((b, i) => {
                        if (b.id == item.id) {
                            d.branches!.splice(i, 1)
                        }
                    })
                } else {
                    loop(flowData, (parentMap.get(d.id) as FlowData).id, (parent) => {
                        parent.nextNode = d.nextNode
                    })
                }
            })
        } else {
            loop(flowData, parentId, (d) => {
                d.nextNode = data.nextNode
            })
        }
    })
}
//选中节点
const selectItem = (item: FlowData) => {
    console.log(item, '选中')
}

//模拟生成id
const uid = ref(12)
const getUUID = () => {
    return uid.value + 1 + ''
}
//添加节点
const addItem = (item: FlowData, branche: boolean, isDown?: boolean, info?: any) => {
    console.log(item)
    let newId = getUUID()
    let newNode: FlowData = { name: `新节点${newId}`, id: newId, info: {} }
    if (branche) {//添加分支节点
        loop(flowData, item.id, (data) => {
            newNode.type = FlowTypeEnum.BRANCH
            newNode.name = '分支'
            data.branches!.push(newNode)
        })
    } else {
        loop(flowData, item.id, (data) => {
            let n = data.nextNode;
            let b = data.branches;
            if (info.type == FlowTypeEnum.BRANCH) {//添加子分支
                delete newNode.name
                newNode.branches = [
                    { id: getUUID(), type: FlowTypeEnum.BRANCH, name: '分支' },
                    { id: getUUID(), type: FlowTypeEnum.BRANCH, name: '分支' },
                ]
                newNode.nextNode = n
                if (isDown) {
                } else {
                    delete data.branches
                }
                data.nextNode = newNode
            } else {//添加节点
                Object.assign(newNode, info)
                if (isDown) {//下节点
                    if (n) {
                        newNode.nextNode = n
                    }
                } else {
                    if (n) {
                        newNode.nextNode = n
                    }
                    if (b) {
                        data.branches = null
                        newNode.branches = b
                    }
                }
                data.nextNode = newNode
            }
        })
    }
}
//缩放
let proportion = ref(100);
const changeScreen = (add: boolean) => {
    if (add) {
        proportion.value = proportion.value + 10;
    } else {
        if (proportion.value - 10 == 0) {
            return false
        }
        proportion.value = proportion.value - 10;
    }
}
</script>
<template>
    <div class="w-full h-full overflow-hidden screen relative">
        <div class="absolute w-full flex opt-box select-none">
            <div class="flex-1"></div>
            <div class="opt-btn" @click="changeScreen(false)">-</div>
            <div class="opt-context">{{ proportion }}%</div>
            <div class="opt-btn" @click="changeScreen(true)">+</div>
        </div>
        <div class="w-full h-full overflow-auto">
            <div :style="`transform: scale(${proportion / 100});`">
                <process class="process" style="" :d="flowData" :parentMap="parentMap" @addItem="addItem"
                    @delItem="delItem" @select="selectItem"></process>
            </div>
        </div>

    </div>
</template>
<style lang="scss" scoped>
.screen {
    background-color: #f9fafc;
    transform-origin: 0 0 0;
}

.opt-box {
    color: #acb3bd;
    top: 15px;
    right: 5%;
    z-index: 99;
    .opt-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        width: 35px;
        height: 35px;
        border-radius: 6px;
        box-shadow: 0 4px 10px #0c1f5014;
    }

    .opt-context {
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 15px;
    }
}

.process {
    padding-top: 55px;
}
</style>
